<?php if (!defined("BASEPATH")) exit("No direct script access allowed"); ?>

<script type="text/javascript">
	var checkedRow = 0;
	function jsUnmappedClick(str) {
		$('#unmappedElement').val(str);
		$('#mapElement').val(str);
		var searchval = '';
		var searchTags = '';
		str = str.replace('/',' ').replace(',',' ').replace('.', ' ');
		for(var i in str.split(' ')) {
			if(str.split(' ')[i].length > 3) {
				searchval += ((searchval)?('+'):('')) + str.split(' ')[i];
				searchTags += '<button type="button" class="btn btn-default" onclick="$(\'#searchval\').val(\'' + str.split(' ')[i] + '\'); jsSearch();" return false;">' + str.split(' ')[i] + '</button> ';
			}
		}
		$('#searchTags').html(searchTags);
		$('#searchval').val(searchval);
		jsSearch();
	}
	
	function jsMappedClick(str) {
		$('#mapElement').val(str);
	}
	
	function jsSearch() {
		$.ajax({
			url: '<?=site_url("mapper/search")?>',
			type: 'post',
			data: {'searchval' : $('#searchval').val()},
			success: function(returnData){
				$('#searchvalElements').html(returnData);
			},
			error: function(e){
				console.info(e);
			}
		});
	}
	
	function jsSave() {
		$.ajax({
			url: '<?=site_url("mapper/save")?>',
			type: 'post',
			data: {'unmappedElement' : $('#unmappedElement').val(), 'mapElement' : $('#mapElement').val()},
			success: function(returnData){
				$('#searchvalElements').html();
				$('#unmappedElement').val('');
				$('#searchTags').val('');
				$('#mapElement').val('');
				$('#tr_' + checkedRow).remove();
				$('#mapperCnt').html(parseInt($('#mapperCnt').html()) - 1);
			},
			error: function(e){
				console.info(e);
			}
		});
	}
</script>

<div class="col-md-4">

	<div class="table-responsive">
		<table class="table table-hover table-striped">
			<? /*
			<thead>
				<th>Unmapped element(s) (<?=count($getUnmappedElements)?>)</th>
			</thead>
			*/ ?>
			<?
			if(count($getUnmappedElements)) {
				foreach($getUnmappedElements as $ii => $el) {
				?>
					<tr id="tr_<?=$ii?>">
						<td>
							<button type="button" onclick="checkedRow = <?=$ii?>; jsUnmappedClick('<?=$this->db->escape_str($el["element"])?>');" class="btn btn-default btn-sm btn-block"><?=$el["element"]?> (<?=$el["cnt"]?>)</button>
						</td>
					</tr>
				<?
				}
			} else {
			?>
				<tr>
					<td>There are no unmapped elements...</td>
				</tr>
			<?
			}
			?>
		</table>
	</div>
	
</div>

<div class="col-md-4">
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<div class="input-group">
				<input type="text" class="form-control" name="unmappedElement" id="unmappedElement" placeholder="Unmapped element">
				<span class="input-group-btn">
					<button class="btn btn-primary" type="button" onclick="$('#mapElement').val($('#unmappedElement').val());">Copy</button>
				</span>
			</div>
		</div>
		<div class="form-group">
			<div>
				<input type="text" class="form-control" name="mapElement" id="mapElement" placeholder="Map to...">
			</div>
		</div>
		<div class="form-group">
			<div>
				<button type="button" class="btn btn-primary" onclick="jsSave(); return false;">Save</button>
			</div>
		</div>
		<div class="form-group">
			<div id="searchTags"></div>
		</div>
	</form>

</div>

<div class="col-md-4">
	<div class="table-responsive">
		<div class="input-group">
			<input type="search" class="form-control" name="searchval" id="searchval" placeholder="Search">
			<span class="input-group-btn">
				<button class="btn btn-primary" type="button" onclick="jsSearch()">Search</button>
			</span>
		</div>
		<table class="table">
			<? /*
			<thead>
				<th>Unmapped element(s)</th>
			</thead>
			*/ ?>
			<tbody id="searchvalElements">
			</tbody>
		</table>
	</div>
</div>

<div class="clearfix"></div>

<div class="table-responsive">
	<table class="table table-hover table-striped">
		<thead>
			<th>Arb(s)</th>
		</thead>
		<?
		if(count($getArbs)) { ?>
			<thead>
			<? foreach($getArbs[0] as $key => $val) { ?>
					<th>
						<?=$key?>
					</th>
			<? } ?>
			</thead>
			<? foreach($getArbs as $el) { ?>
				<tr>
				<? foreach($el as $val) { ?>
						<td>
							<?=$val?>
						</td>
				<? } ?>
				</tr>
			<? }
		} else {
		?>
			<tr>
				<td>There are no arbs available...</td>
			</tr>
		<?
		}
		?>
	</table>
</div>